<cp-navbar (onClickLeft)="onClickLeft()"></cp-navbar>
<div class="error" *ngIf="error"><cp-error (reload)="handleReload()"></cp-error></div>
<div class="loading" *ngIf="loading"><cp-loading></cp-loading></div>
<div class="forbidden" *ngIf="forbidden"><cp-forbidden text="活动已下架"></cp-forbidden></div>
<div class="container" *ngIf="!error && !loading && !forbidden">
  <div class="top">
    <div class="slider">
      <Carousel [autoplay]="false" [dotActiveStyle]="{ backgroundColor: '#fff' }">
        <CarouselSlide *ngFor="let item of detail.Photo">
          <div class="item"><img [src]="item" /></div>
        </CarouselSlide>
      </Carousel>
    </div>
    <div class="baseinfo">
      <div class="namebox">
        <p class="name">{{ detail.ProjectDescription.Name }}</p>
        <span class="status">{{ detail.ProjectDescription.Status | estateSellStatus }}</span>
      </div>
      <div class="oprbox">
        <div class="titlebox">
          <span class="type">{{ detail.Category | estateActType }}</span> <span class="title">{{ detail.Title }}</span>
        </div>
        <button class="btn" [queryParams]="{ ActivityID: detail.Id }" routerLink="/workspace/home/activitySignup">
          立即报名
        </button>
      </div>
      <div class="timebox">
        <span class="lefttime">剩余{{ detail.LeftTime }}</span>
        <span class="enroll">
          <span class="number">{{ detail.Count }}</span
          >人已报名</span
        >
      </div>
    </div>
  </div>
  <div class="common-label-value">
    <p class="title">活动规则</p>
    <div class="list">
      <div class="item" *ngFor="let item of detail.Description">
        <p class="label4">{{ item.Name }}：</p>
        <pre class="value" [innerHTML]="item.Value"></pre>
      </div>
      <div class="item">
        <p class="label4">活动期限：</p>
        <p class="value">{{ detail.Start }} 至 {{ detail.End }}</p>
      </div>
    </div>
  </div>
  <div class="gutter"></div>
  <div class="common-label-value">
    <p class="title">楼盘详情</p>
    <div class="list">
      <div class="item">
        <p class="label2">均价：</p>
        <p class="value">{{ detail.ProjectDescription.AveragePrice }}{{ detail.ProjectDescription.Unit }}</p>
      </div>
      <div class="item">
        <p class="label2">开盘：</p>
        <p class="value">{{ detail.ProjectDescription.OpenDay }}</p>
      </div>
      <div class="item">
        <p class="label2">地址：</p>
        <p class="value">{{ detail.ProjectDescription.Address }}</p>
      </div>
    </div>
    <div class="oprbar" [queryParams]="{ project: detail.ProjectDescription.Id }" routerLink="/workspace/estate/info">
      <button class="btn btn-block">查看更多信息</button>
    </div>
  </div>
  <div>
    <cp-oprbar
      type="promotion"
      [id]="detail.Id"
      [estateStatus]="detail.ProjectDescription.Status"
      [phone]="detail.ProjectDescription.Phone"
      [projectDispatch]="detail.ProjectDispatch"
      [(favorite)]="detail.Favorite"
    ></cp-oprbar>
  </div>
</div>
